import React, { Component } from 'react'
import InputCom from './commponents/input'
import Content from './commponents/content'
import Bottom from './commponents/bottom'
import { nanoid } from 'nanoid'
import './index.css'
export default class app extends Component {
    state = {
        todoList: [
            { id: nanoid(), name: '打代码', check: true },
            { id: nanoid(), name: '吃饭', check: true },
            { id: nanoid(), name: '睡觉', check: false },
            { id: nanoid(), name: '打游戏', check: false },
            { id: nanoid(), name: '喝水', check: true },
        ],
    }
    addData = (e) => {
        // console.log('键盘事件',e.keyCode,e.target.value);
        if (e.keyCode == '13') {
            //当前是回车事件
            if (e.target.value) {
                this.setState({ todoList: [...this.state.todoList, { id: nanoid(), name: e.target.value, check: false }] });
                e.target.value = '';
            } else {
                alert('不能添加空的任务')
            }
        }
    }
    changeData = (item, e) => {
        let list = this.state.todoList.map((v) => {
            if (v.id == item.id) {
                v.check = e.target.checked;
            }
            return v
        })
        this.setState({ todoList: list })
    }
    changeShow = (flag, item) => {
        let list = this.state.todoList.map((v) => {
            if (v.id == item.id) {
                v.show = flag
            }
            return v
        })
        this.setState({ todoList: list })
    }
    delData=(item)=>{
        let list = this.state.todoList.filter((v) => {
            return item.id!=v.id
        })
        this.setState({ todoList: list })
    }
    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <InputCom addData={this.addData}></InputCom>
                    <Content list={this.state.todoList} changeData={this.changeData} changeShow={this.changeShow} delData={this.delData}></Content>
                    <Bottom list={this.state.todoList}></Bottom>
                </div>
            </div>
        )
    }
}
